iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
自我挑戰組

sass&css 30天學習日誌系列 第 6

CSS: 偽元素應用- Ribbon緞帶

  • 分享至 

  • xImage
  •  

流程如下:
1.建立旋轉緞帶
2.裁剪緞帶
3.建立緞帶背面陰影
4.套用到圖片

成品如圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YwJu0nHx3i.png

1.建立旋轉緞帶

html

<div class="ribbon">熱門<div>

css

.ribbon {
  width: 260px;
  padding:15px 0;
  background-color: #3a3;
  text-align:center;
  color:#fff;
}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321XonB4Q3VaR.png

2.裁剪緞帶

a.新增div並把緞帶放到裡面,把新增的div當作裁剪區域

https://ithelp.ithome.com.tw/upload/images/20200411/20107321O8Qn6KIvG4.png

b.緞帶多餘部分就隱藏

注意:

這個橘色裁切區域只是方便來製作背面緞帶陰影,並非套用在這個橘色裁切區域上

https://ithelp.ithome.com.tw/upload/images/20200411/20107321JKdcDLoeu9.png

3.建立緞帶背面陰影

背面陰影是可看見的形狀為三角形,可使用上圖橘色裁剪區域(box)的偽元素來做三角陰影

https://ithelp.ithome.com.tw/upload/images/20200411/20107321kgXwSotLXA.png

使用box的before和after,並使用border建立三角形,完成後會發現只有一個小方塊在上面,是因為before和after都在同個位置

https://ithelp.ithome.com.tw/upload/images/20200411/20107321S6TtTxM0j3.png

所以針對各部份去做位置微調就可出現,另外因為box有使用overflow:hidden,
在此先註解掉,位置調整好在重開overflow

https://ithelp.ithome.com.tw/upload/images/20200411/20107321jVYOgiTuna.png

css調整如下圖
使用之前製作三角形用到的transform和translate的對齊方式

https://ithelp.ithome.com.tw/upload/images/20200411/20107321UX664r1ouu.png

下圖中可看到藍色小方塊有跑到緞帶上,偽元素使用z-index就可解決了

https://ithelp.ithome.com.tw/upload/images/20200411/20107321IE635FqWI5.png

打開overflow效果就出來了

https://ithelp.ithome.com.tw/upload/images/20200411/20107321LBiPx3GMlC.png

4.套用到圖片

新增外層wrap div,把所有內容丟進去,裡面要設定相對定位

https://ithelp.ithome.com.tw/upload/images/20200411/2010732144QfAT8Mbv.png

原先box設定相對定位則改為絕對定位

https://ithelp.ithome.com.tw/upload/images/20200411/201073213Zk5Ji2W9B.png

此時發現緞帶貼齊wrap,只要把box,也就是裁切區域設置top和left位置就可以了

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YWjTFrWh98.png

codepen: https://codepen.io/yuski/pen/XxpMRY
文章取材來源: https://www.nxworld.net/tips/pure-css-corner-ribbon.html


上一篇
CSS: 偽元素應用- tooltip對話框
下一篇
CSS: 偽元素應用- Step progress bar 進度條
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言